<template>
  <div>
    <h1>商品详情</h1>
    <el-row v-show="commodity.id == this.$route.params.id ? true : false">
      <el-col :span="8">
        <el-card :body-style="{ padding: '0px' }" class="product_card">
          <img :src="commodity.src" class="image" />
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-row>
          <el-col :span="24">
            <table style="width: 100%">
              <tr>
                <td>ID编号</td>
                <td>商品名称</td>
                <td>价格</td>
                <td>操作</td>
              </tr>
              <tr>
                <td>{{ commodity.id }}</td>
                <td>{{ commodity.name }}</td>
                <td>{{ commodity.price | price }}</td>
                <td>
                  <el-button
                    size="mini"
                    type="primary"
                    icon="el-icon-shopping-cart-2"
                    v-model="commodity"
                    @click="addToCart(commodity)"
                    :disabled="!user ? true : false"
                    >加入购物车</el-button
                  >
                </td>
              </tr>
            </table>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-tabs v-model="activeName">
              <el-tab-pane label="产品介绍" name="first">
                <span>{{ commodity.introduction }}</span>
              </el-tab-pane>
              <el-tab-pane label="规格与包装" name="second"
                >规格与包装</el-tab-pane
              >
            </el-tabs>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
    <div>暂无商品</div>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
const images = [
  {
    id: 1,
    src: require("../assets/images/可口可乐.jpg"),
  },
  {
    id: 2,
    src: require("../assets/images/百事芬达.jpg"),
  },
  {
    id: 3,
    src: require("../assets/images/康师傅牌桶装方便面.jpg"),
  },
  {
    id: 4,
    src: require("../assets/images/法式小面包.jpg"),
  },
];
export default {
  name: "Product-details",
  data() {
    return {
      commodity: {},
      activeName: "first",
      user: localStorage.user,
    };
  },
  methods: {
    ...mapMutations(["addToCart"]),
  },
  computed: {
    ...mapState({
      commodities: (state) => state.shops,
    }),
  },
  filters: {
    price(price) {
      return "￥" + price;
    },
  },
  created() {
    let commodity = this.commodities.find(
      (commodity) => commodity.id == this.$route.params.id
    );
    let imageSrc = images.find((image) => image.id == this.$route.params.id);
    if (!commodity) return;
    if (!imageSrc) return;
    this.commodity = { ...commodity, src: imageSrc.src };
  },
};
</script>

<style>
body {
  text-align: center;
}
.di {
  width: 100%;
  height: 50px;
  border: solid 1px pink;
}
img {
  width: 250px;
  height: 250px;
}
.el-tab-pane {
  text-align: left;
}
</style>